<template>
	<view class="container">
		<view class="use_item" ref="publishType">
			<view class="title">
				发布类型
			</view>
			<input v-model="form.publishType" readonly placeholder="请输入发布类型" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="contractId">
			<view class="title">
				选择合同
			</view>
			<input @click="contract()" readonly v-model="contractName" placeholder="请选择合同" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="positionParent">
			<view class="title">
				职位类型
			</view>
			<picker @change="bindPickerChange" :value="form.positionParent" :range="TypeList" :range-key="'name'">
				<view class="picker">{{TypeList[index].name}}</view>
			</picker>

			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="title">
			<view class="title">
				职位标题
			</view>
			<input v-model="form.title" placeholder="请输入2-10字职位标题" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>

		<Blank></Blank>
		<view class="use_item" ref="salary">
			<view class="title">
				职位薪资
			</view>
			<input v-model="form.salary" placeholder="请输入职位薪资" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="positionLabel">
			<view class="title">
				职位标签
			</view>
			<!-- <picker :value="tindex" :range="positionLabellist" @change="tchange">
				<view>{{positionLabellist[tindex]}} ↓</view>
			</picker> -->
			<ld-select :list="positionLabellist" list-key="label" value-key="value" placeholder="请选择职位标签" v-model="form.positionLabel"
			 selectBgColor="#ccc" clearable :multiple='true' @change="selectChange">
			</ld-select>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="city">
			<view class="title">
				工作城市
			</view>
			<region-picker @change="region_change" :value="350104">
				<view class="picker">{{form.city||'请选择城市'}}</view>
			</region-picker>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="address" @click="chooseAddress">
			<view class="title">
				详细地址
			</view>
			<input placeholder="请选择详细地址" v-model="form.address" placeholder-style="color:#CCCCCC;font-size:32rpx" :disabled="!form.address" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="beginTime">
			<view class="title">
				开始时间
			</view>
			<!-- <picker mode="date" :value="sdate" :start="startDate" :end="endDate" @change="sdateChange">
				<view class="picker">{{sdate}}</view>
			</picker> -->
			<e-picker-plus @confirm="sdateChange" mode="YMDhm">
				<view class="picker" style="margin-left: 0;">{{sdate}}</view>
			</e-picker-plus>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item" ref="number">
			<view class="title">
				总招聘人数
			</view>
			<input v-model="form.number" placeholder="请输入总招聘人数" placeholder-style="color:#CCCCCC;font-size:32rpx" />
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view class="use_item">
			<view class="title">
				是否拼团
			</view>
			<view class="readio flex_start">
				<label class="radio picker flex_start" @click="radio('1')">
					<radio value="1" :checked="isgroup" color="#007AFF" /><text>是</text>
				</label>
				<label class="radio picker flex_start" @click="radio('2')">
					<radio value="2" :checked="!isgroup" color="#007AFF"/><text>否 </text>
				</label>
			</view>
			<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
		</view>
		<view v-if="isgroup">
			<Blank></Blank>

			<view class="use_item" ref="groupPrice">
				<view class="title">
					拼团价格
				</view>
				<input v-model="form.groupPrice" placeholder="请输入拼团价格" placeholder-style="color:#CCCCCC;font-size:32rpx" />
				<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
			</view>
			<view class="use_item" ref="groupNumber">
				<view class="title">
					拼团人数
				</view>
				<input v-model="form.groupNumber" placeholder="请输入拼团人数" placeholder-style="color:#CCCCCC;font-size:32rpx" />
				<image src="../../static/img/myCenter/arrowright.png" mode=""></image>
			</view>
			<Blank></Blank>
		</view>

		<view class="car_require" ref="desc">
			<view class="tip">
				请补充职位要求
			</view>
			<textarea v-model="form.desc" placeholder-style="color:#BBBBBB" placeholder="请输入职位详细要求" maxlength="500" />
			</view>
		<view class="car_image">
			<view class="tip">
				<view class="">
					请添加职位图片
				</view>
				<view class="no_require">
					(不必须)
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for="(item,index) in positionFile" :key="index" class="package_img">
						<image :src="item.url" mode="" v-if="item.type=='image'"></image>
						<video :src="item.url" mode="" v-if="item.type=='video'"></video>
				</view>
				<view class="package_img" @click="upload()">
					<image  src="../../static/img/photo.png" mode=""></image>
				</view>
			</view>
			
		</view>
		<HandleBtn :btnName="form.id ? '确定修改':'确认发布'" @click.native="timingRecruit()" class="confirm_btn"></HandleBtn>

	</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import HandleBtn from "../../components/handleBtn.vue"
	import MyPicker from '../../components/dying318-picker/Picker.vue';
	export default {
		components: {
			Blank,
			HandleBtn,
			MyPicker
		},
		data() {
			return {
				idArray: [
					{name: "publishType", offTop: 0,tips:'请选择发布类型'},
					{name: "contractId", offTop: 0,tips:'请选择合同'}, 
					{name: "positionParent", offTop: 0,tips:'请选择职位类型'},
					{name: "title", offTop: 0,tips:'请选择职位标题'},
					{name: "salary", offTop: 0,tips:'请选择职位薪资'},
					{name: "positionLabel", offTop: 0,tips:'请选择职位标签'},
					{name: "city", offTop: 0,tips:'请选择工作城市'},
					{name: "address", offTop: 0,tips:'请输入详细地址'},
					{name: "beginTime", offTop: 0,tips:'请选择开始时间'},
					{name: "number", offTop: 0,tips:'请选择设置总招聘人数'},
					{name: "groupPrice", offTop: 0,tips:'请设置拼团价格', prevRequire: 'isgroup'},
					{name: "groupNumber", offTop: 0,tips:'请设置拼团人数', prevRequire: 'isgroup'},
					{name: "desc", offTop: 0,tips:'请输入详细要求'},
				],
				index:0,
				isgroup:false,
				positionFile:[],//临时图片视频
				positionLabellist:[{
				      value: '午休',
				      label: '午休'
				    }, {
				      value: '包住',
				      label: '包住'
				    }, {
				      value: '不加班',
				      label: '不加班'
				    }, {
				      value: '免费零食',
				      label: '免费零食'
				    }, {
				      value: '员工旅游',
				      label: '员工旅游'
				    },{
				      value: '定期团建',
				      label: '定期团建'
				    },{
				      value: '生日福利',
				      label: '生日福利'
				    },{
				      value: '五险一金',
				      label: '五险一金'
				    },{
				      value: '交通补贴',
				      label: '交通补贴'
				    },{
				      value: '免费工装',
				      label: '免费工装'
					}],//职位标签
				sdate: '请选择开始时间',
				TypeList: [
					{
						name:''
					}
				],	                  				                  				                           				
				form:{
					publishType:"",
					title:"",
					salary:"",
					positionLabel:[],
					positionParent:"",
					positionChild:"",
					beginTime:"",
					desc:"",
					positionFile:[],
					number: 1,
					group:0,
					city:"",
					address :"",
					contractId :"",
					longitude:'',
					dimension:''
				},
				contractName:"",
				addressdetail:''
			}
		},
		watch:{
			isgroup: function(nval){
				if(nval) {
					this.$nextTick(() => {
						this.idArray.forEach(item => {
							if(item.prevRequire)
							item.offTop = this.$refs[item.name].$el.offsetTop;
						})
					})
				}
			},
		},
		onLoad(option) {
			this.form.publishType = option.type
			uni.setNavigationBarTitle({
				title:option.type
			})
			if(option.edit) {
				let obj = JSON.parse(option.obj)
				this.form = obj
				this.form.publishType = obj.publishType
				this.sdate = this.$utils.happenTimeFun(obj.createTime)
				this.form.beginTime = this.$utils.happenTimeFun(obj.createTime)
				this.isgroup = obj.group == 1 ? true : false
				
				console.log(JSON.stringify(obj))
			}
		},
		onShow() {
			if (uni.getStorageSync('contractobj')) {
				this.contractName = uni.getStorageSync('contractobj').name
				this.form.contractId = uni.getStorageSync('contractobj').id
				uni.removeStorageSync('contractobj')
			}
		},
		mounted() {
			this.getpositionLabel()
			this.getpositionType()
			this.$nextTick(() => {
				this.idArray.forEach(item => {
					if (!item.prevRequire) {
						console.log(this.$refs[item.name].$el.offsetTop)
						item.offTop = this.$refs[item.name].$el.offsetTop;
					} else if(this[item.prevRequire]) {
						item.offTop = this.$refs[item.name].$el.offsetTop;
					}
					// item.offTop = this.$refs[item.name].offsetTop;
					
				})
			})
		},
		methods: {
			bindPickerChange(e) {
			    this.index = e.target.value
					this.form.positionParent = this.TypeList[this.index].id
			},
			chooseAddress(){
				var _this=this;
				if(!_this.form.address) {
					uni.chooseLocation({
						// keyword:this.addressdetail,
						// longitude:this.citylongitude,
						// latitude:this.citydimension,
						success(res) {
							console.log(res)
							_this.form.dimension = res.latitude 
							_this.form.longitude = res.longitude 
							_this.form.address = res.name
						}
					})
				}
			},
			goto(){
				uni.removeStorageSync('urls')
				let url = "http://api.map.baidu.com/marker?location="+this.latitude+","+this.longitude+"&title="+this.address+"&content="+this.detailAddress+"&output=html"
				uni.setStorageSync('urls',url)
				uni.navigateTo({
					url:'/pages/fullTimeJob/testNavigation/testNavigation'
				})
			},
			radio(num){
				if(num==1){
					this.isgroup = true
					this.form.group = 1
					
				}else{
					this.isgroup = false
					this.form.group = 0
				}
			},
			timingRecruit(){
				// if (this.form.group > 0) {
				// 	if (+this.form.groupNumber > +this.form.number) {
				// 		this.$utils.showLayer('拼团人数不能超过总招聘人数')
				// 		return
				// 	} 
				// }
				// if (!this.form.beginTime) {
				// 	this.$utils.showLayer('请选择开始时间')
				// 	return
				// }
				// if (this.form.city == '请选择城市') {
				// 	this.$utils.showLayer('请选择城市')
				// 	return
				// }
				for (let i = 0; i < this.idArray.length; i++) {
					 if (!this.form[this.idArray[i].name]) {
					 	// todo 滚到哪里去
							uni.pageScrollTo({
								duration: 100,
								scrollTop:this.idArray[i].offTop
							})
							this.$utils.showLayer(this.idArray[i].tips)
							return
					 }
				}
				this.form.recruitId = this.form.id ? this.form.id : 0
				this.$utils.requert({url:'companyRecruit',data:this.form,type:'post'}).then(res=>{
					if(res.code === 1 ){
						this.$utils.showLayer(this.form.id ? '修改成功':'发布成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			// 合同管理
			contract(){
				uni.navigateTo({
					url:"/pages/contract/contract?type=" + this.form.publishType
				})
			},
			// 职位标签获取
			getpositionLabel(){
				this.$utils.requert({url:'positionLabel',type:'post'}).then(res=>{
					if(res.code === 1 ){
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			// 职位类型获取
			getpositionType(){
				this.$utils.requert({url:'positionType',type:'post'}).then(res=>{
					if(res.code === 1 ){
						console.log(res.data)
						this.TypeList = res.data
						this.form.positionParent = res.data[0].id
					}else{    
						this.$utils.showLayer(res.message)
					}
				})
			},
			//类型选择
			t_selectChange(value){
				// console.log(value)
				this.form.positionType = value
			},
			//标签选择
		   selectChange(value){
			  
				this.form.positionLabel = value
				console.log(this.form.positionLabel)
				this.form.positionLabel =this.form.positionLabel.join(",")
		   },
			region_change(e){
				this.form.city = e.detail.value[1]
				this.addressdetail = e.detail.value[0]+e.detail.value[1]+e.detail.value[2]
			},
			// 选择日期
			sdateChange(e) {
				this.sdate = e.result
				this.form.beginTime = e.result
			},
			upload(){
				let _this = this
				// _this.uploadImage()
				uni.showModal({
					title: '提示',
					content: '请选择上传类型',
					showCancel: true,
					cancelText: '上传视频',
					confirmText: '上传图片',
					success: res => {
						console.log(res)
						if(res.confirm){
							_this.uploadImage()
						} else {
							_this.uploadVideo()
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//图片上传
			uploadImage(){
				var _this = this
				uni.showLoading({
					title:'上传中'
				})
			 uni.chooseImage({
				count: 2,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: res=> {
					console.log(res)
					var tempFilePaths = res.tempFilePaths
					tempFilePaths.forEach(element => {
						// const file = res.tempFilePaths[0]
						const  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: _this.$utils.domain+'/api/api/uploadImg', //仅为示例，非真实的接口地址
							filePath: element,
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (imgres) => {
								var imgres = JSON.parse(imgres.data)
								_this.imgsFile = _this.form.positionFile.push(imgres.data.src)
								_this.positionFile.push({
									url:imgres.data.src,
									type:'image'
								})
								uni.hideLoading()
								console.log(_this.form.positionFile)
							},
							complete:()=>{
								uni.hideLoading()
							}
						});
					})
				},
				error : function(e){
				 // console.log(e);		
				}
				});
			},
			//视频上传
			uploadVideo(){
				uni.showLoading({
					title:'上传中'
				})
				 uni.chooseVideo({
					count: 2,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: res=> {
						let file = res.tempFilePath
						console.log(res)
						console.log(res.tempFilePath)
						let  token  = uni.getStorageSync('token')
						uni.uploadFile({
							url: this.$utils.domain+'/api/api/uploadFile', //仅为示例，非真实的接口地址
							filePath: file,
							
							name: 'file',
							header:{
								'accessToken':token
							},
							formData: {
								'type': '2'
							},
							success: (res) => {
								var res = JSON.parse(res.data)
								this.imgsFile = 	this.form.positionFile.push(res.data.src)
								this.positionFile.push({
									url:res.data.src,
									type:'video'
								})
								console.log(this.form.positionFile)
							},
							complete:()=>{
								uni.hideLoading()
							}
						});
					},
					error : function(e){
					 // console.log(e);		
					}
					});
				},
			// 获取年月日信息
				getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
				
					if (type === 'start') {
						year = year - 60;
					} else if (type === 'end') {
						year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
				}
			},
			computed: {
					startDate() {
						return this.getDate('start');
					},
					endDate() {
						return this.getDate('end');
					}
				},
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.use_item {
		padding: 38rpx 0;
		margin:0 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.use_item:nth-child(2){
		border-bottom: none;
	}
	.use_item:nth-child(7){
		border-bottom: none;
	}

	.use_item .title {
		font-size: 32rpx;
		color: #868686;
		width: 50%;
	}

	.use_item input {
		font-size: 32rpx;
		text-align: right;
		margin-right: 20rpx;
	}
	.use_item .picker{
		font-size: 32rpx;
		margin-left: 40rpx;
	}	
	.use_item image{
		width: 14rpx;
		height: 24rpx;
	}
	.tip{
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 34rpx;
	}
	textarea{
		background-color: #f5f4f6;
		font-size: 28rpx;
		width: 100%;
		border-radius: 7rpx;
		padding:32rpx 24rpx;
		box-sizing: border-box;
	}
	.car_require {
		padding:50rpx 24rpx;
		box-sizing: border-box;
	}
	.car_image{
		padding:0 24rpx 50rpx;
		box-sizing: border-box;
	}
	.car_image .tip{
		display: flex;
	}
	.car_image .tip .no_require{
		font-size: 28rpx;
		color: #BBBBBB;
	}
	.car_image .package_img{
		width:200rpx;
		height: 200rpx;
		background-color: #f5f4f6;
		text-align: center;
		margin-left: 20rpx;
		flex-shrink: 0;
		margin-bottom: 15rpx;
	}
	.car_image .package_img image,
	.car_image .package_img video{
		width:100%;
		height: 100%;
		/* margin-top: 62rpx */
		border-radius: 15rpx;

	}

	.confirm_btn{
		margin-top: 70rpx;
		margin-bottom: 70rpx;
	}
	.button{
		font-size: 28rpx;
		margin: 0;
		margin-left: auto;
		background-color: #fff;
		color: #7a7a7a;
	}
	.button::after{
		height: 100%;
		border: none;
	}
</style>
